<template>
  <div>
      <!-- 列表组件 -->
      <h3>列表</h3>
      <table>
          <tbody>
              <!-- 利用循环遍历出vuex中的数据 -->
              <tr v-for="(item,key) in $store.state.dlList" 
                :key='key' 
                @mouseover="dlshow(key)"
                @mouseout="dlhide(key)">
                  <td>
                      <input type="checkbox" v-model='item.flag' @input='dlflag(key)'>
                  </td>
                  <td>
                      <span class="dlju">{{item.int}}</span>
                  </td>
                  <td>
                      <el-button @click='dldel(key)' v-show='item.dlshow' 
                      @mouseover="dlshow(key)"
                    @mouseout="dlhide(key)">删除</el-button>
                  </td>
              </tr>
          </tbody>
      </table>
  </div>
</template>

<script>
export default {
    methods:{
        // 删除方法
        dldel(key){
            // 找到索引
            var dlind = this.$store.state.dlList.findIndex((i,k)=>{
                return k==key
            })
            // 利用方法进行删除
            this.$store.commit('dldel',dlind)
        },
        // 改变flag
        dlflag(key){
            // console.log(key)
            this.$store.commit('dlint',key)
        },
        dlshow(k) {
            this.$store.commit("dlshow", k);
        },
        dlhide(k) {
            this.$store.commit("dlhide", k);
        }
    }
}
</script>

<style lang='scss'>
tbody{
    width: 100%;
}
tr:hover{
    background:rosybrown;
}
.dlju{
    display: inline-block;
    width: 200px;
}
</style>